<template>
  <div class="infor-box" v-loading="loading" element-loading-text="加载中..." element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.2)">
    <div class="infor-tab">
      <div v-for="(item, index) in tabList" :key="index" @click="tabChange(index, 1)"
        :class="{ 'active-tab': activeTab == index }">
        <span class="tab-item">{{ item }}</span>
        <span class="line" v-if="index != 2">/</span>
      </div>
      <img src="@/assets/img/gisPage/off.png" alt="" @click="inforOff" />
    </div>
    
  </div>
</template>
<script lang="ts">
import barLinePbulic from "@/components/gisPage/barLinePbulic.vue";
export default {
  components: { barLinePbulic },
};
</script>
<script setup lang="ts">
import { ref, reactive, toRefs, onMounted, nextTick, onBeforeUnmount } from "vue";
import { barLineParamsData } from "@/utils/chartsPbulic";
import { selectProjectInfo } from "@/api/gisHouseAnalysAlert";
import busEmitter from "@/utils/bus";
const priceTrendData = ref({}); // 成交信息-价格走势-折线图data
const priceTrendDomRef: any = ref(null); // 成交信息-价格走势-domref
const tradeTrendData = ref({}); // 成交信息-成交走势-折线图data
const tradeTrendDomRef: any = ref(null); // 成交信息-成交走势-domref
const emits = defineEmits(["inforOffla"]);
const tabList = reactive(["基本信息", "成交信息", "周边设施"]);
const chartsList = reactive(["按月", "按年"]);
const facilitiesList = reactive(["教育", "交通", "医疗", "银行", "商业"]);
const facilitiesListTwo = reactive(["幼儿园", "小学", "中学", "大学"]);
const activeTab = ref(0);
const chartsOne = ref(1);
const chartsTwo = ref(1);
const facilitiesListTab = ref(0);
const facilitiesListTwoTab = ref(0);
const infoData: any = ref({});
const baseInfoData: any = ref({}); // 基本信息
const surroundingFacilityList: any = ref([]); // 周边设施list
const loading = ref(false); // 周边设施list
const inforOff = () => {
  emits("inforOffla");
  busEmitter.emit("inforFun", 1);
};
const tabChange = (index: any, num: any) => {
  // num 1顶部切换  2成交信息价格走势切换  3成交信息成交走势切换  4周边设施切换1  5周边设施切换2
  if (num == 1) {
    activeTab.value = index;
    getInfo();
  } else if (num == 2) {
    // 成交信息-line1
    chartsOne.value = index;
    getInfo("chartOne");
  } else if (num == 3) {
    // 成交信息-line2
    chartsTwo.value = index;
    getInfo("chartTwo");
  } else if (num == 4) {
    // 周边设施-顶部tab1
    facilitiesListTab.value = index;
    getInfo();
  } else if (num == 5) {
    // 周边设施-顶部tab2
    facilitiesListTwoTab.value = index;
  }
};
// 获取租赁市场供需走势
const priceTrend = async (priceData: any, tradeData: any, whichChart: string) => {
  let legendStyle = {
    show: false,
    icon: "",
    left: 0,
    top: 0,
    itemWidth: 31,
    itemHeight: 14,
    itemGap: 18,
  };
  let gridConfig = {
    left: "0%",
    right: "5%",
    bottom: "15%",
    top: "10%",
  };
  if (!whichChart || whichChart === "chartOne") {
    // 价格走势
    let priceParamsData = barLineParamsData(
      [],
      priceData.xAxis,
      [
        {
          name: "单位：套",
          type: "1",
        },
      ],
      [
        {
          name: "line",
          type: "1",
          areaStyleType: "2",
          stack: "1",
        },
      ],
      [priceData.gj],
      [
        {
          a: "rgba(228, 135, 29, 1)",
          b: "rgba(228, 135, 29, 0)",
        },
      ],
      legendStyle,
      gridConfig
    );
    priceTrendData.value = priceParamsData;
    if (whichChart === "chartOne") {
      if (priceTrendDomRef.value) {
        nextTick(() => {
          priceTrendDomRef.value.updateChart();
        });
      }
    }
  }
  if (!whichChart || whichChart === "chartTwo") {
    // 成交走势
    let tradeParamsData = barLineParamsData(
      [],
      tradeData.xAxis,
      [
        {
          name: "单位：套",
          type: "1",
        },
      ],
      [
        {
          name: "line",
          type: "1",
          areaStyleType: "2",
          stack: "1",
        },
      ],
      [tradeData.gj],
      [
        {
          a: "rgba(228, 135, 29, 1)",
          b: "rgba(228, 135, 29, 0)",
        },
      ],
      legendStyle,
      gridConfig
    );
    tradeTrendData.value = tradeParamsData;
    if (whichChart === "chartTwo") {
      if (tradeTrendDomRef.value) {
        nextTick(() => {
          tradeTrendDomRef.value.updateChart();
        });
      }
    }
  }
};

const getInfo = (whichChart: string = "") => {
  loading.value = true;
  selectProjectInfo({
    xmmc: infoData.value.name, // 项目名称
    // xmmc: "三隆熙湖枫景二期B期", // 项目名称
    classType: activeTab.value + 1, // 分类type
    priceDateType: activeTab.value + 1 === 2 ? (chartsOne.value === 0 ? 1 : 2) : undefined, // 价格走势-时间type
    tradingDateType: activeTab.value + 1 === 2 ? (chartsTwo.value === 0 ? 1 : 2) : undefined, // 成交走势-时间type
    zbType: activeTab.value + 1 === 3 ? facilitiesListTab.value + 1 : undefined, // 周边设施
  })
    .then((res) => {
      loading.value = false;
      if (activeTab.value + 1 === 2) {
        // 成交信息
        const tradeInfo = res?.data?.resultMap;
        if (Object.keys(tradeInfo)?.length) {
          const priceData = {
            xAxis: tradeInfo?.priceTimeList || [],
            gj: tradeInfo?.priceList || [],
          };
          const tradeData = {
            xAxis: tradeInfo?.tradingTimeList || [],
            gj: tradeInfo?.tradingList || [],
          };
          priceTrend(priceData, tradeData, whichChart);
        }
      } else if (activeTab.value + 1 === 3) {
        // 周边设施
        const surroundingFacility = res?.data?.zbList;
        surroundingFacilityList.value = [];
        if (surroundingFacility?.length) {
          surroundingFacilityList.value = surroundingFacility;
          busEmitter.emit("inforFun", surroundingFacility);
        }
      } else {
        const tempDetail = res?.data?.detailsBasicsInfo;
        if (Object.keys(tempDetail)?.length) {
          baseInfoData.value = tempDetail;
        }
      }
    })
    .catch((err) => {
      console.log(err);
    });
};

onMounted(() => {
  nextTick(() => {
    busEmitter.on("getDetail", (res) => {
      infoData.value = res;
      getInfo();
    });
  });
});
onBeforeUnmount(() => {
  busEmitter.off("getDetail"); // 销毁bus总线
});
</script>

<style scoped lang="less">
.basic-title {
  margin-bottom: 20px;

  .basic-item {
    margin: 5px 0px;
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 14px;
    color: #ffffff;

    &-left,
    &-right {
      flex: 1;
    }

    .basic-map {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
  }
}

.infor-box {
  width: 522px;
  height: 510px;
  background: linear-gradient(180deg, #136d87 0%, #052a35 100%);
  border: 2px solid #67c2d0;
  position: fixed;
  bottom: 287px;
  right: 40px;
  padding: 25px 30px;
  z-index: 1001;

  .infor-tab {
    display: flex;
    font-size: 24px;
    color: #fff;
    margin-bottom: 20px;
    cursor: pointer;
    position: relative;

    .line {
      padding: 0 10px 0 5px;
    }

    .active-tab .tab-item {
      color: #ead77a;
    }

    img {
      width: 21px;
      height: 21px;
      cursor: pointer;
      position: absolute;
      right: 0;
      top: 7px;
    }
  }

  .property-developer {
    font-size: 14px;
    color: #fff;
    margin-bottom: 20px;

    .title {
      font-size: 20px;
      margin-bottom: 10px;
    }

    &-content {
      display: flex;
      align-items: flex-start;

      p {
        flex: 1;
      }
    }
  }

  .infor-basic {
    font-size: 14px;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .title {
      font-size: 20px;
      margin-bottom: 10px;
    }

    .basic-one {
      width: 266px;

      p:not(:first-child) {
        margin: 5px 0;
      }
    }
  }
}

.infor-transaction {
  font-size: 20px;
  color: #fff;

  .charts-title {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .charts-title-bg {
      width: 303px;
      height: 23px;
      padding-left: 29px;
      font-size: 18px;
      box-sizing: border-box;
      background: url("@/assets/img/gisPage/infor-charts-title.png") no-repeat;
      background-size: 100% 100%;
      line-height: 23px;
    }

    .charts-title-tab {
      display: flex;
      align-items: center;

      p {
        font-size: 14px;
        background: url("@/assets/img/gisPage/infor-charts-tab.png") no-repeat;
        background-size: 100% 100%;
        width: 64px;
        height: 23px;
        text-align: center;
        cursor: pointer;
      }

      p:nth-child(2) {
        margin-left: -14px;
      }

      .charts-title-tab-active {
        background: url("@/assets/img/gisPage/infor-charts-tab-active.png") no-repeat;
        background-size: 100% 100%;
      }
    }
  }

  .charts-content {
    width: 100%;
    height: 160px;
  }

  .h160 {
    height: 160px;
  }

  .charts-money:last-child {
    margin-top: 35px;
  }
}

.infor-facilities {
  font-size: 20px;
  color: #fff;

  .department-tab-one {
    display: flex;

    p {
      width: 80px;
      height: 27px;
      background: url("@/assets/img/gisPage/department-bg.png") no-repeat;
      background-size: 100% 100%;
      line-height: 27px;
      text-align: center;
      font-size: 18px;
      margin-right: 7px;
      cursor: pointer;
    }

    .department-tab-one-active {
      background: url("@/assets/img/gisPage/department-bg-active.png") no-repeat;
      background-size: 100% 100%;
      color: #ead77a;
    }
  }

  .department-tab-two {
    font-size: 14px;
    color: #fff;
    display: flex;
    align-items: center;
    margin: 18px 0;

    p {
      padding-left: 24px;
      margin-right: 20px;
      cursor: pointer;
      position: relative;
    }

    p::before {
      content: "";
      position: absolute;
      top: 3px;
      left: 0;
      width: 14px;
      height: 14px;
      background: url("@/assets/img/gisPage/radio-bg.png") no-repeat;
      background-size: 100% 100%;
    }

    .department-tab-two-active::before {
      background: url("@/assets/img/gisPage/radio-bg-active.png") no-repeat;
      background-size: 100% 100%;
    }
  }
}

.department-tab-list {
  overflow: hidden;
  overflow-y: auto;
  height: 360px;
  margin-top: 15px;

  // 设置滚动条样式
  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 16px;
    background: #02e3ee;
  }

  &::-webkit-scrollbar-track {
    border-radius: 16px;
    background: #8a8a8a;
  }

  .facilities-item {
    padding: 8px 18px 8px 0;
    border-bottom: 1px dashed #67c2d0;

    .facilities-item-top {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .distance {
        font-size: 14px;
      }

      .facilities-item-top-l {
        display: flex;
        align-items: center;

        .name {
          font-size: 18px;
        }

        .num {
          width: 24px;
          height: 27px;
          background: url("@/assets/img/gisPage/sort.png") no-repeat;
          background-size: 100% 100%;
          line-height: 24px;
          text-align: center;
          margin-right: 12px;
          font-size: 14px;
          color: #11768e;
        }
      }
    }

    .facilities-item-bottom {
      font-size: 14px;
      margin-left: 36px;
      width: 300px;
    }
  }

  .facilities-item:nth-last-child(1) {
    border: none;
  }
}

.surrounding-facility-empty {
  height: 360px;

  /deep/ .el-empty__image {
    display: none;
  }

  /deep/ .el-empty__description p {
    color: white;
  }
}
</style>
